import React, { useEffect } from 'react';
import { Form, Input, Modal, Select } from 'antd';
import { payMethod, adminPriceType } from '@/utils/constant';
import { isNumber } from '@/utils/utils';

const FormItem = Form.Item;
const Detail = (props: any) => {
  const {
    visible,
    onCancel,
    onOk,
    getForm,
    loading,
    afterClose,
    editId,
  } = props;
  const [form] = Form.useForm();
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 4 },
      md: { span: 4 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 18 },
      md: { span: 18 },
    },
  };
  useEffect(() => {
    getForm(form);
  }, []);

  return (
    <Modal
      afterClose={afterClose}
      destroyOnClose={true}
      confirmLoading={loading}
      title={editId !== undefined ? '编辑' : '新增'}
      visible={visible}
      onCancel={onCancel}
      onOk={onOk}
    >
      <Form hideRequiredMark style={{ marginTop: 8 }} form={form} name="basic">
        <FormItem
          {...formItemLayout}
          label={'供应商名称'}
          name="supplier"
          rules={[{ required: true, message: '请输入供应商名称' }]}
        >
          <Input />
        </FormItem>
        <FormItem
          {...formItemLayout}
          label={'商品名称'}
          rules={[{ required: true, message: '请输入商品名称' }]}
          name="productName"
        >
          <Input />
        </FormItem>
        <FormItem
          {...formItemLayout}
          label={'结算方式'}
          name="settlementMethod"
          rules={[{ required: false, message: '请输入结算方式' }]}
        >
          <Select>
            {payMethod.map(item => (
              <Select.Option key={item.value} value={item.value}>
                {item.label}
              </Select.Option>
            ))}
          </Select>
        </FormItem>
        <FormItem
          {...formItemLayout}
          label={'联系人'}
          rules={[{ required: true, message: '请输入联系人' }]}
          name="contact"
        >
          <Input />
        </FormItem>
        <FormItem
          {...formItemLayout}
          label={'联系电话'}
          name="contactPhoneNo"
          rules={[{ required: true, message: '请输入联系电话' }]}
        >
          <Input />
        </FormItem>
        <FormItem
          {...formItemLayout}
          label={'供应商地址'}
          name="address"
          rules={[{ required: true, message: '请输入供应商地址' }]}
        >
          <Input />
        </FormItem>
        <FormItem {...formItemLayout} label={'备注'} name="remark">
          <Input.TextArea rows={4} />
        </FormItem>
      </Form>
    </Modal>
  );
};
export default Detail;
